Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at some Bootstrap 5 helper classes.
Clearfix
Clearfix lets us easily clear floated content in a container.
To add it, we add the .clearfix class to the parent element.
It can also be used as a mixin.
For example, we can write:
.element {
@include clearfix;
}
And we can use it in HTML by writing:
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">floated left</button>
<button type="button" class="btn btn-secondary float-right">floated right</button>
</div>
Colored Links
We can add colored links with the .link-* classes to colorize links.
For example, we can write:
<a href="#" class="link-primary">Primary</a>
<a href="#" class="link-secondary">Secondary</a>
<a href="#" class="link-success">Success</a>
<a href="#" class="link-danger">Danger</a>
<a href="#" class="link-warning">Warning</a>
<a href="#" class="link-info">Info</a>
<a href="#" class="link-light">Light</a>
<a href="#" class="link-dark">Dark</a>
to add the links.
Embeds
Bootstrap 5 comes with a component to create responsive video or slideshow embeds based on the width of the parent.
They’re applied directly to the iframe , embded , video , and object .
And we don’t need to add frameborder='0' to remove the border.
For example, we can write:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IA7REQxohV4" title="YouTube video" allowfullscreen></iframe>
</div>
We have the title to set the title.
allowfullscreen lets us show the video in full screen mode.
Aspect Ratios
We can change the aspect ratios of the embeds.
To do that, we add some classes:
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IA7REQxohV4" title="YouTube video" allowfullscreen></iframe>
</div>
We have the embed-responsive-* class to change the aspect ratio.
Also, we can change the embed to other ratios:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IA7REQxohV4" title="YouTube video" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IA7REQxohV4" title="YouTube video" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IA7REQxohV4" title="YouTube video" allowfullscreen></iframe>
</div>
We can change the ratio to 16 x9, 4×3, or 1×1.
Position
Bootstrap 5 also comes with helpers for changing positions.
For example, we can write:
<div class="fixed-top">...</div>
to make the position of the div fixed to the top.
Also, we can write:
<div class="fixed-bottom">...</div>
to make it fixed to the bottom.
We can also make it position: sticky with the .sticky-top class:
<div class="sticky-top">...</div>
And we can make that responsive:
<div class="sticky-sm-top">Stick small or wider</div>
<div class="sticky-md-top">Stick medium or wider</div>
<div class="sticky-lg-top">Stick large or wider</div>
<div class="sticky-xl-top">Stick extra large or wider</div>
Screen Readers
There’re utility classes for screen readers.
Bootstrap 5 comes with the sr-only class to make the text available to screen readers only.
For example, we can write:
<h2 class="sr-only">screen readers</h2>
.sr-only-focusable shows the element only when it’s focused:
<a class="sr-only-focusable" href="#content">main content</a>
Stretched Link
We can make the link stretched with the .stretched-link class.
For example, we can write:
<div class="card" style="width: 20rem;">
<img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. .</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
Since we have the stretch-link class on the link, it’ll be stretched to the width of the card.
The containing block has the position: relative , so we don’t have to add it to make the link stretch.
We’ve to add position: relative to most components to make the link stretch.
We can do that by writing:
<div class="d-flex position-relative">
<img src="http://placekitten.com/200/200" class="flex-shrink-0 mr-3" alt="cat">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
<a href="#" class="stretched-link">Go</a>
</div>
</div>
We added the position-relative class to the container div to make the link stretch.
Conclusion
Bootstrap 5 provides us with various helpers for styling.
